<template>
  <div class="declarationform" style="margin-left: 1%">
    <el-form :model="dataForm" ref="dataForm" >
      <el-row  :gutter="20">
        <el-col :span="6">
          <el-form-item prop="orderNumber">
            <el-input v-model="dataForm.orderNumber" placeholder="请输入报单账号">
              <template slot="prepend">报单账号</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="userName">
            <el-input v-model="dataForm.userName" placeholder="请输入用户名">
              <template slot="prepend">用户名</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="realName">
            <el-input v-model="dataForm.realName" placeholder="请输入真实姓名">
              <template slot="prepend">真实姓名</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="from-btns">
      <kt-button :label="$t('action.reset')" perms="true"  type="primary" @click="resetForm('dataForm')"  />
      <kt-button :label="$t('action.search')" perms="true"  type="primary" @click="searchForm" />
    </div>
    <kt-button :label="$t('action.addForm')" type="primary" perms="DeclarationForm:DeclarationForm:add" @click="handleAdd" style="float: left;margin-bottom: 1%"
               />

    <KtTable class="table-width" declaration  permsBind="DeclarationForm:DeclarationForm:bind" permsDelete="DeclarationForm:DeclarationForm:delete"
             permsUntying="DeclarationForm:DeclarationForm:untying" :data="pageResult" :columns="columns"
             @findPage="findPage" @handleBinduser="handleBinduser" @handleDelete="handleDelete"
             @handleUntie="handleUntie">
    </KtTable>
    <!--新增报单号-->
    <el-dialog :title="'新增报单号'" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
    <el-form :model="dataFormAdd"  :rules="dataFormRules" ref="dataFormAdd" :size="size">
      <el-form-item prop="orderNumber">
        <el-input v-model="dataFormAdd.orderNumber" auto-complete="off"  placeholder="请输入报单账号">
          <template slot="prepend">报单账号</template>
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
      <el-button :size="size" authType="primary" @click.native="submitFormAdd" :loading="editLoading" >{{$t('action.submit')}}</el-button>
    </div>
  </el-dialog>
    <!--绑定用户-->
    <el-dialog :title="'绑定用户'" width="30%" :visible.sync="dialogVisibleEdit" :close-on-click-modal="false">
    <el-form :model="dataFormEdit"  label-width="80px" :rules="dataFormRules" ref="dataFormEdit" :size="size">
      <el-form-item  prop="threeLevelDeptId" label="三级部门">
        <el-select v-model="dataFormEdit.threeLevelDeptId"  filterable placeholder="请输入三级部门" clearable @change="findUsersDown"  value-key="id"
                   style="width: 100%;">
          <el-option
            v-for="item in deptLevel3"
            :key="item.id"
            :label="item.deptName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item  prop="userId" label="选择用户">
        <el-select v-model="dataFormEdit.userId"  filterable placeholder="请输入用户名" clearable @change="change"   value-key="id"
                   style="width: 100%;">
          <el-option
            v-for="item in users"
            :key="item.id"
            :label="item.userName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="userName" label="用户名">
        <el-input v-model="dataFormEdit.userName" :disabled="true" auto-complete="off"  placeholder="请选择用户" >
        </el-input>
      </el-form-item>
      <el-form-item prop="realName" label="真实姓名">
        <el-input v-model="dataFormEdit.realName" :disabled="true" auto-complete="off"   placeholder="请选择用户">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" >
      <el-button :size="size" @click.native="dialogVisibleEdit = false">{{$t('action.cancel')}}</el-button>
      <el-button :size="size" authType="primary" @click.native="submitFormEdit" :loading="editLoading" >{{$t('action.submit')}}</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
  import KtButton from "@/views/Core/KtButton";
  import KtTable from "@/views/Core/KtTable";

  export default {
    name: 'Correspondence',
    components: {
      KtButton,
      KtTable
    },
    data() {
      return {
        size: "small",
        // filters: {
        //   name: ""
        // },
        columns: [
          { type: "index", label: "序号", minWidth: 50 },
          {prop: "orderNumber", label: "报单账号", minWidth: 50},
          {prop: "userName", label: "用户名", minWidth: 80},
          {prop: "realName", label: "真实姓名", minWidth: 80},
        ],
        pageRequest: { pageNum: 1, pageSize: 8 },
        pageResult: {
          content:[],
          totalSize:""
        },
        dialogVisible: false, // 弹窗是否显示
        dialogVisibleEdit: false, // 绑定弹窗是否显示
        editLoading: false,
        dataFormRules: {
          name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
          orderNumber: [{ required: true, message: "请输入报单账号", trigger: "blur" }]
        },
        dataForm: {
          realName:"",
          userName:"",
          orderNumber:""
        },
        dataFormAdd:{
          orderNumber:""
        },
        dataFormEdit:{
          orderNumber:"",
          id:"",
          realName:"",
          userName:"",
          roleName:"",
          userId:"",
          threeLevelDeptId:""
        },
        deptTreeProps: {
          label: "name",
          children: "children"
        },
        deptLevel3:[],// 三级部门下拉框
        users:[],// 选择用户下拉框
        Allusers:[],// 所有用户下拉框
      }
    },

    methods: {
      //获取下拉列表
      findDown: function () {
        this.$api.dropdown.deptLevel3({deptType:1}).then(res =>{
          this.deptLevel3=res.departmentInfoList
        })
        this.$api.dropdown.users({userType:3}).then(res =>{
          this.Allusers=res.userInfoList
        })
      },
      //三级部门下面员工集合
      findUsersDown:function (value) {
        this.dataFormEdit.userId=""
        this.dataFormEdit.userName=""
        this.dataFormEdit.realName=""
        this.$api.dropdown.users({userType:3,threeLevelDeptId:value}).then(res =>{
          this.users=res.userInfoList
        })
      },
      //用户真实姓名，用户名
      change:function (value) {
        for (let i=0;i<this.users.length; i++){
          if(value== this.users[i].id){
            this.dataFormEdit.userName =this.users[i].userName
            this.dataFormEdit.realName =this.users[i].realName
          }
        }
      },
      //获取数据
      findPage: function(data) {
        if (data !== null) {
          this.pageRequest = data.pageRequest;
          this.pageRequest=Object.assign({},this.pageRequest)
        }
        // this.pageRequest.columnFilters = {
        //   name: { name: "name", value: this.filters.name }
        // };
        this.$api.declarationform.findPage({...this.pageRequest,...this.dataForm}).then(res => {
          this.pageResult.content = res.orderNumberVoList;
          this.pageResult.totalSize = res.total;
          })
          .then(data != null ? data.callback : "");
      },
      //重置
      resetForm(dataForm) {
        this.dataForm={
          realName:"",
          userName:"",
          orderNumber:""
        }
        this.editLoading = false;
        this.findPage(null);
      },
      //查询
      searchForm: function() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.editLoading = true
            let params = Object.assign({}, this.dataForm);
            this.$api.declarationform.findPage(params).then(res => {
              this.editLoading = false;
              if (res.result == 1) {
                this.pageResult.content=res.orderNumberVoList
                this.pageResult.totalSize = res.total;
              }
            });
          }
        });
      },
      //新增
      handleAdd: function () {
        this.dialogVisible = true;
      },
      //绑定页面
      handleBinduser:function (params) {
        this.dialogVisibleEdit =true;
        this.dataFormEdit = Object.assign({}, params.row);
        this.$api.dropdown.users({userType:3,threeLevelDeptId:params.row.threeLevelDeptId}).then(res =>{
          this.users=res.userInfoList
        })
        for(let i=0; i<this.Allusers.length; i++){
          if(params.row.userId == this.Allusers[i].id){
            this.dataFormEdit.threeLevelDeptId=this.Allusers[i].threeLevelDeptId
          }
        }
      },
      //新增提交
      submitFormAdd:function () {
        this.$refs.dataFormAdd.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              this.editLoading = true;
              let params = Object.assign({}, this.dataFormAdd);
              this.$api.declarationform.save(params).then(res => {
                this.editLoading = false;
                if (res.result == 1) {
                  this.$message({ message: res.msg, type: "success" });
                  this.dialogVisible = false;
                  this.$refs["dataFormAdd"].resetFields();
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error"
                  });
                }
                this.findPage(null);
              });
            });
          }
        });
      },
      //绑定
      submitFormEdit:function () {
        this.$refs.dataFormEdit.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              this.dataEdit={
                id: this.dataFormEdit.id,
                userId:this.dataFormEdit.userId
              }
              this.editLoading = true;
              let params = Object.assign({}, this.dataEdit);
              this.$api.declarationform.edit(params).then(res => {
                this.editLoading = false;
                if (res.result == 1) {
                  this.$message({ message: res.msg, type: "success" });
                  this.dialogVisibleEdit = false;
                  this.$refs["dataFormEdit"].resetFields();
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error"
                  });
                }
                this.findPage(null);
              });
            });
          }
        });
      },
      //解绑
      handleUntie:function (data) {
        let orderInfoId=data.params[0].id
        this.$api.declarationform.relieve({orderInfoId:orderInfoId}).then(
          data != null ? data.callback : "");
      },
      //删除
      handleDelete: function(data) {
        let orderInfoId=data.params[0].id
        this.$api.declarationform.batchDelete({orderInfoId:orderInfoId}).then(
          data != null ? data.callback : "");
      },
    },

    mounted() {
      this.findDown()
    }
  }
</script>

<style scoped>

  .from-btns {
    clear: both;
    /* margin: 50px 0; */
  }
</style>
